<template>
  <div id="orders" :class="styleTypeClass" :style="{width,height:'100%'}">
    <!-- 默认样式-->
    <template>
      <div class="title">
        <div class="d-flex pt-2 pl-2">
          <span class="title-icon"></span>
          <span class="fs-xl text mx-2">用户统计</span>
        </div>
      </div>
      <div class="mt-3" style="height:95%">
        <EchartsIndex :options="options"/>
      </div>
    </template>
  </div>
</template>

<script>
import mixin from '../mixin/index'
import mixinEcharts  from '../mixin/echarts'
export default {
  name: "Users",
  mixins: [mixin,mixinEcharts],
  components: {},
  data(){
    return {
      options:{
        // color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        legend: {
          data: ['巡检', '巡更', '保洁绿化', '消杀', '维保']
        },
        grid: {
          top: 20,
          left: '3%',
          right: '4%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['12月份','1月份', '2月份', '3月份', '4月份', '5月份',]
        },
        yAxis: {
          type: 'value',
          // max:0
        },
        series: [
          {
            data: [0,10, 10, 10, 20, 30 ],
            type: 'line',
            smooth: true,
            // 修改区域填充颜色
            areaStyle: {
              normal: {
                // '#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'
                color: '#80FFA5' // 这里设置你想要的颜色
              }
            }
          },
          {
            data: [14,24, 23, 24,20, 30  ],
            type: 'line',
            smooth: true,
            // 修改区域填充颜色
            areaStyle: {
              normal: {
                // '#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'
                color: '#00DDFF' // 这里设置你想要的颜色
              }
            }
          },
          {
            data: [5,14, 25, 20,20, 31  ],
            type: 'line',
            smooth: true,
            // 修改区域填充颜色
            areaStyle: {
              normal: {
                // '#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'
                color: '#37A2FF' // 这里设置你想要的颜色
              }
            }
          },
          {
            data: [10,20, 23, 14,20, 33  ],
            type: 'line',
            smooth: true,
            // 修改区域填充颜色
            areaStyle: {
              normal: {
                // '#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'
                color: '#501735' // 这里设置你想要的颜色
              }
            }
          },
          {
            data: [14,23, 24, 25,20, 40  ],
            type: 'line',
            smooth: true,
            // 修改区域填充颜色
            areaStyle: {
              normal: {
                // '#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'
                color: '#2a3f67' // 这里设置你想要的颜色
              }
            }
          }
        ]
      }
    }
  },
  props:{
    totalCount:{
      type: Number,
      default: 0
    },
    loginCount:{
      type: Number,
      default: 0
    },
    createCount:{
      type: Number,
      default: 0
    },
  },
  computed:{},

  watch:{
    totalCount() {
      this.options.title.text = '总数量\n' + this.totalCount
    },
    loginCount() {
      this.options.series[0].data[0].value = this.loginCount
    },
    createCount() {
      this.options.series[0].data[1].value = this.createCount
    }
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/datav/infoPlatform.scss';
</style>
